import { Component, SimpleChanges , OnInit} from '@angular/core';
import { Router } from '@angular/router'; 


/**
 * app菜单栏标签编辑组件
 * @example
 * <app-menu></app-menu>
 */
@Component({
  selector: 'app-menu',
  templateUrl: './menu.component.html',
  styleUrls: ['./menu.component.scss']
})

export class MenuComponent implements OnInit{
  ngOnInit(): void {

  }
    constructor(public router:Router){
    }



    /**
     * 菜单栏数据列表
     */
  public tabs:Array<any> = [
    {
      activeSrc: './/src/assets/modules/bvideo/img/zz.png',
      src: '../../../assets/modules/bvideo/img/full-home.png',
      active: false,
      title: '首页'
    },
    {
      src: '../../../assets/modules/bvideo/img/updatas.png',
      activeSrc: '../../../assets/modules/bvideo/img/full-updatas.png',
      active: false,
      title: '动态'
    },
    {
      src: '../../../assets/modules/bvideo/img/Add.png',
      activeSrc: '../../../assets/modules/bvideo/img/Add.png',
      active: false,
      title: ''
    },
    {
      src: '../../../assets/modules/bvideo/img/shopping.png',
      activeSrc: '../../../assets/modules/bvideo/img/full-shopping.png',
      active: false,
      title: '会员购'
    },
    {
      src: '../../../assets/modules/bvideo/img/mine.png',
      activeSrc: '../../../assets/modules/bvideo/img/full-mine.png',
      active: false,
      title: '我的'
    },
  ]

  /**
   * 
   * 可将图片在正常状态和高亮间转换，并且跳到对应页面
   * @param {number} id 图片的下标
   */
  onChange(id:number){
    if(id==1){this.router.navigate(['/bvideo/mobile-home'])}
    else if(id==2){this.router.navigate(['/bvideo/mobile-dynamic'])}    
    else if(id==5){this.router.navigate(['/bvideo/mobile-mine'])}
    for (let index = 0; index < 5; index++) {
      let dom:any = document.getElementById(`img${index + 1}`)      
      dom.setAttribute('src',this.tabs[index].src)
    }

    let changeImgDom:any = document.getElementById(`img${id}`)
    changeImgDom.setAttribute("src",this.tabs[id-1].activeSrc)

  }
  
}
